<template>
<div class="home">
<div class="nav">
  <div class="logo">
    <img width="100" height="30" src="https://woniuxy.com/static/images/logo-500px.png" alt="">
  </div>
  <ul class="menu">
    <li @click="addCheck(item.id)" :class="{active:item.checked}" v-for="item in products" :key="item.id">
      
      <!-- <span>{{item.title}}</span> -->
      <router-link :to="item.path">
        <i class="fa" :class="item.font"></i>
        <span>{{item.title}}</span>
        <i class="fa fa-angle-down"></i>
      </router-link>
      
    </li>
  </ul>
</div>
<div class="message">
    
  <router-view></router-view>
</div>
</div>
  
</template>

<script>
export default {
data(){
  return{
    products:[
      {id:1,title:'主页',font:'fa-address-book',checked:false,path:'/home/'},
      {id:2,title:'用户',font:'fa-bath',checked:false,path:'/home/user'},
      {id:3,title:'订单',font:'fa-superpowers',checked:false,path:'/home/order'}
    ]
  }
},
methods:{
  addCheck(id){
    this.products.forEach(element => {
      element.checked=false
      if (element.id==id) {
        element.checked=true
      }
    });
  }
}
}
</script>

<style lang='scss' scoped>
@import "../../node_modules/font-awesome/css/font-awesome.min.css";

.home{
  width: 100%;
  height: 100vh;
  display: flex;
  .nav{
    width: 20%;
    
    background-color:#021626;
    .logo{
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 10px;
      margin-bottom: 10px;
    }
    .menu{
      margin: 0;
      padding: 0;
      list-style: none;
      li{
        width: 100%;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        
        &.active{
          background-color:orange ;
        }
        a{
          width: 100%;
          height: 100%;
          padding: 5px 20px;
          box-sizing: border-box;
          color: white;
          span{
          margin: 0 90px 0 10px;
        }
        }
        
      }
    }
  }
  .message{
    flex-grow: 1;
    
    background-color: red;
  }
}
</style>